<div class="middle">
  <div class="middle-header header-toolbar">
    <div class="container-fluid">
      <div
        class="page-header page-header-bleed-right page-header-bleed-left">
        <span class="label label-warning label-tech-preview">Technology Preview</span>
        <h1>
          Stateful Sets
          <!-- TODO: docs are in progress
          <span class="page-header-link">
            <a ng-href="{{'stateful-sets' | helpLink}}" target="_blank">
              Learn More <i class="fa fa-external-link" aria-hidden="true"></i>
            </a>
          </span>
          -->
        </h1>
      </div>
      <div ng-if="((statefulSets | hashSize) > 0) || filterWithZeroResults" class="data-toolbar">
        <div class="data-toolbar-filter">
          <project-filter></project-filter>
        </div>
      </div>
    </div>
  </div>
  <div class="middle-content" persist-tab-state>
    <div class="container-fluid">
      <div class="row" ng-if="loaded">
        <div class="col-md-12">
          <div ng-if="(statefulSets | hashSize) == 0">
            <p ng-if="!loaded">
              Loading...
            </p>
            <div ng-if="loaded" class="empty-state-message text-center">
              <div ng-if="!filterWithZeroResults">
                <h2>No stateful sets.</h2>
                <p>No stateful sets have been added to project {{projectName}}.</p>
              </div>
              <div ng-if="filterWithZeroResults">
                <h2>The filter is hiding all stateful sets. <a href="" ng-click="clearFilter()" role="button" class="nowrap">Clear Filter</a></h2>
              </div>
            </div>
          </div>
          <table ng-if="(statefulSets | hashSize) > 0" class="table table-bordered table-mobile table-layout-fixed">
            <colgroup>
              <col class="col-sm-5">
            </colgroup>
            <thead>
              <tr>
                <th>Name</th>
                <th>Replicas</th>
                <th>Created</th>
              </tr>
            </thead>
            <tbody ng-repeat="(statefulSetName, statefulSet) in statefulSets">
              <tr>
                <td data-title="Name">
                  <a ng-href="{{statefulSet | navigateResourceURL}}">{{statefulSet.metadata.name}}</a>
                </td>
                <td data-title="Replicas">
                  <span ng-if="(podsByOwnerUID[statefulSet.metadata.uid] | hashSize) !== statefulSet.spec.replicas">{{podsByOwnerUID[statefulSet.metadata.uid] | hashSize}}/</span>{{statefulSet.spec.replicas}} replica<span ng-if="statefulSet.spec.replicas != 1">s</span>
                  <!-- TODO: swap back in 1.6 when the replicas count for StatefulSets is fixed
                  <span ng-if="statefulSet.status.replicas !== statefulSet.spec.replicas">{{statefulSet.status.replicas}}/</span>{{statefulSet.spec.replicas}} replica<span ng-if="statefulSet.spec.replicas != 1">s</span>
                  -->
                </td>
                <td data-title="Created">
                  <span am-time-ago="statefulSet.metadata.creationTimestamp"></span>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
